import React,{PureComponent} from 'react'
import {View,StyleSheet,TouchableOpacity,Text,Dimensions,Image,Button} from 'react-native'

const {width,height} = Dimensions.get('window')

type Props = {
    info: Object,
    onPress: Function,
}

export default class SelectOpenClassCell extends PureComponent<Props>{
    render(){
        let {info} = this.props
        let start_time = info.start_date
        var showText = ''
        var show_txt = ''
        var ren = ''
        if (info.buys >= info.totals * 0.8 && info.buys < info.totals) {
            showText = info.remains
            show_txt = '仅剩名额'
            ren = '/' + info.totals +  '人'
        }else if(info.buys >= info.totals){
            show_txt = ''
            showText = '已报满'
        }else{
            showText = info.buys
            show_txt = '已报名额'
            ren = '/' + info.totals +  '人'
        }
        return (
            <View style={styles.container}>
                <TouchableOpacity onPress={() => this.props.onPress(info)}>
                    <View style={{flex:1}}>
                        <Image source={{uri:info.banner}} style={styles.course_image}/>
                        <View style={styles.course_free_view}>
                            <Text style={styles.course_free_text}>免费</Text>
                        </View>
                    </View>
                    <Text numberOfLines={1} style={styles.course_title}>{info.title}</Text>
                    <View style={{flexDirection:'row',alignItems:'flex-end'}}>
                        <View style={styles.course_teacher_contain}>
                            <Image style={styles.course_teacher_avatar} source={{uri:info.zhu_teacher.img}}/>
                            <Text style={styles.course_teacher_name}>{info.zhu_teacher.name}</Text>
                        </View>
                        <View style={{flex:1}}/>
                        <Text style={{color:'#333333',fontSize:9,marginRight:10}}>{show_txt}</Text>
                    </View>
                    <View style={styles.course_teacher_contain}>
                        <Image style={styles.course_time_icon} source={require('../../../res/img/select/select_time.png')}/>
                        <Text style={styles.course_time_text}>{start_time}</Text>
                        <View style={{flex:1}}/>
                        <Text style={{color:'rgba(219, 56, 67, 1)',fontSize:14}}>{showText}</Text>
                        <Text style={{color:'#333333',fontSize:11,marginRight:10}}>{ren}</Text>
                    </View>
                </TouchableOpacity>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container:{
        // flex:1,
        backgroundColor:'white',
        borderRadius:5,
        shadowColor:'#7D7D7D',
        shadowOffset:{h:2,w:2},
        shadowRadius:1,
        shadowOpacity:0.4,
        marginBottom:10,
        marginLeft:10,
        height:190,
        width:(width - 34)/2,
    },
    course_image:{
        height:100,
        width:(width - 34)/2,
        resizeMode:'cover',
        borderRadius:6,
        position:'absolute',
    },
    course_free_view:{
        position:'relative',
        marginLeft:13,
        width:39,
        height:16,
        backgroundColor:'black',
        justifyContent:'center',
        alignItems:'center',
    },
    course_free_text:{
        color:'white',
        fontSize:10,
    },
    course_title:{
        color:'rgba(0,0,0,0.8)',
        fontSize:14,
        marginLeft:15,
        marginTop:115,
        fontWeight:'bold',
        marginRight:15,
    },
    course_teacher_contain:{
        alignItems:'center',
        flexDirection:'row',
        marginTop:10,
    },
    course_teacher_avatar:{
        height:18,
        width:18,
        resizeMode:'cover',
        marginLeft:15,
        borderRadius:9,
    },
    course_teacher_name:{
        color:'rgba(0,0,0,0.5)',
        fontWeight:'bold',
        fontSize:11,
        marginLeft:5,
    },
    course_time_icon:{
        height:10,
        width:10,
        resizeMode:'cover',
        marginLeft:15,
    },
    course_time_text:{
        color:'rgba(0,0,0,0.3)',
        fontSize:9,
        marginLeft:3,
    },
    course_bo_fang_Button:{
        width:39,
        height:15,
        marginRight:15,
    },
})